<template>
	<view class="box">
		<image class="bgImage" :src="task.imageSrc===null||task.imageSrc===''?getimageBaseUrl('bgMsg.jpg'):task.imageSrc"
			mode="aspectFill"></image>
		<view class="activity-slogan">{{task.title}}</view>
		<view class="content">{{task.detail}}</view>
		<view class="line-box">
			<view class="line-left"></view>
			<view class="mid-line">截止时间</view>
			<view class="line-right"></view>
		</view>
			 <u-count-down
			             :time="task.surplusTime"
			             format="DD:HH:mm:ss"
			            autoStart
			            @change="onChange"
			    >
				<view class="deadline-line">
					<view class="item-time">
						{{ dataTime.day >10?dataTime.day:'0'+dataTime.day}}
					</view>
					<view class="item-txt">
						天
					</view>
					<view class="item-time">
						{{ dataTime.hours>10?dataTime.hours:'0'+dataTime.hours}}
					</view>
					<view class="item-txt">
						时
					</view>
					<view class="item-time">
						{{ dataTime.minute >10?dataTime.minute:'0'+dataTime.minute}}
					</view>
					<view class="item-txt">
						分
					</view>
					<view class="item-time">
						{{ dataTime.second >10?dataTime.second:'0'+dataTime.second}}
					</view>
					<view class="item-txt">
						秒
					</view>
				</view>
			    </u-count-down>
			<!-- <u-count-down :time="task.surplusTime" format="DD 天 HH 时 mm 分 ss 秒">
			</u-count-down> -->
		
		<view class="btn-apply" v-if="!task.joined&&task.surplusTime>0&&!task.fulled" @click.native="applyActivity">
			立即报名</view>
		<view class="btn-apply" v-if="task.joined&&task.surplusTime>0&&!task.fulled" style="#CCCCCC">
			已报名</view>
		<view class="btn-apply" v-if="task.fulled&&task.surplusTime>0" style="#CCCCCC">人数已满
		</view>
		<view class="btn-apply" v-if="task.surplusTime<0" style="#CCCCCC">报名已结束</view>

		<view  style="height: 66rpx ;background-color: #F5F5F5;" class="line-box">
			<view style="width: 96rpx; margin-left: 216rpx;" class="line-left"></view>
			<view style="color: rgba(102, 102, 102, 1);" class="mid-line">任务详情</view>
			<view style="width: 96rpx;" class="line-right"></view>
		</view>
 
		<view class="activity-detail">
			<u-cell-group  :border="fasle">
				<u-cell  size="large">
					<view slot="title"class="u-slot-title">参与人数</view>
					<view slot="icon"class="u-slot-icon"><u-icon size="22" name="account"></u-icon></view>
					<view slot="value"class="u-slot-value">{{task.userNum}}</view>
				
				</u-cell>
				<u-cell  size="large">
						<view slot="title"class="u-slot-title">剩余名额</view>
						<view slot="icon"class="u-slot-icon"><u-icon size="22" name="account"></u-icon></view>
						<view slot="value"class="u-slot-value">{{task.surplus}}</view>
				</u-cell>
				<u-cell size="large">
					<view slot="title"class="u-slot-title">活动类型</view>
					<view slot="icon"class="u-slot-icon"><u-icon size="22" name="grid"></u-icon></view>
					<view slot="value"class="u-slot-value">陆地救援搜索</view>
				</u-cell>
				<u-cell size="large">
					<view slot="title"class="u-slot-title">活动开始时间</view>
					<view slot="icon"class="u-slot-icon"><u-icon size="22" name="clock"></u-icon></view>
					<view slot="value"class="u-slot-value">{{task.startTime}}</view>
				</u-cell>
				<u-cell  size="large">
					<view slot="title"class="u-slot-title">活动结束时间</view>
					<view slot="icon"class="u-slot-icon"><u-icon size="22" name="clock-fill"></u-icon></view>
					<view slot="value"class="u-slot-value">{{task.endTime}}</view>
				</u-cell>
				<u-cell size="large" isLink="true" @click.native="goMap()" >
					<view slot="title"class="u-slot-title">活动地区</view>
					<view slot="icon"class="u-slot-icon"><u-icon size="22" name="map"></u-icon></view>
					<view slot="value"class="u-slot-value">{{task.address}}</view>
					<view style="transform: translateX(20rpx);" slot="right-icon"class="u-slot-icon"><u-icon size="22" name="arrow-right"></u-icon></view>
				</u-cell>
				<u-cell  size="large">
					<view slot="title"class="u-slot-title">报名范围</view>
					<view slot="icon"class="u-slot-icon"><u-icon size="22" name="eye"></u-icon></view>
					<view slot="value"class="u-slot-value">郫都区</view>
				</u-cell>
				<u-cell size="large" >
					<view slot="title"class="u-slot-title">联系人</view>
					<view slot="icon"class="u-slot-icon"><u-icon size="22" name="account-fill"></u-icon></view>
					<view slot="value" style="padding-right:20rpx;" class="u-slot-value">{{task.publishUser}}</view>
				</u-cell>
				<u-cell  size="large">
					<view slot="title"class="u-slot-title">联系电话</view>
					<view slot="icon"class="u-slot-icon"><u-icon size="22" name="phone"></u-icon></view>
					<view slot="value"class="u-slot-value">12341770202</view>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			// console.log(option.id)
			this.getTaskDetail(option.id)
		},
		data() {
			return {
				
				dataTime:{
					day:0,
					hours:0,
					minute:0,
					second:0,
				},
				
				bgImageSrc: `${this.$baseUrl}/image/download?name=bgMsg.jpg`,
				// bgImageSrc:'https://m.360buyimg.com/mobilecms/s1125x549_jfs/t14860/139/504394142/191023/ca7c592e/5a2fcd75Ncde0d77d.jpg!q70.jpg',
				task: {},
			};
		},
		methods: {
			 onChange(e) {
				 this.dataTime.day = e.days
				 this.dataTime.hours = e.hours
				 this.dataTime.minute = e.minutes
				 this.dataTime.second = e.seconds
			            },
			// 设置倒计时时间
			setDataTime(){
					/* let date = new Date(task.surplusTime) */
					let temp = this.task.surplusTime/1000
					this.dataTime.day = parseInt(temp/(60*60*24)) 
					this.dataTime.hours = parseInt((temp%(60*60*24))/(60*60))
					this.dataTime.minute = parseInt((temp%(60*60))/60)
					this.dataTime.second = parseInt(temp%60)
			},
		
			goMap() {
				// console.log("进入地图")
				uni.openLocation({
					latitude: 29.58832234563708,
					longitude: 106.56436432812498, //经度
					name: "电脑城",
					address: "重庆九龙坡"
				})
			},
      
			getTaskDetail(id) {
				const user = uni.getStorageSync("user");
				// console.log(user)
				uni.request({
					url: `${this.$baseUrl}/task/Detail/${id}/${user.openid}`,
					method: 'GET',
					success: (res) => {
						console.log(res.data)
						this.task = res.data.data
						this.setDataTime();
					}
				})
			},
			applyActivity() {
				const user = uni.getStorageSync("user");
				console.log(user)
				uni.request({
					url: `${this.$baseUrl}/task/apply/${this.task.id}/${user.openid}`,
					method: 'PUT',
					success: (res) => {
						this.task.joined = true
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.box {
		padding: 32rpx 0;
			
		.bgImage {
			height: 320rpx;
			width: 686rpx;
			margin-left: 32rpx;
			border-radius: 8rpx;
		}

		// 标题
		.activity-slogan {
			margin-left: 32rpx;
			margin-top: 24rpx;
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
		}

		// 内容
		.content {
			margin-top: 12rpx;
			text-indent: 2em;
			margin-left: 32rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 44rpx;
			color: rgba(102, 102, 102, 1);
		}

		.line-box {
			margin-top: 32rpx;
			display: flex;
			
			align-items: center;

			.line-left {
				margin-left: 32rpx;
				width: 278rpx;
				height: 2rpx;
				border-top: 2rpx solid rgba(221, 221, 221, 1.0);
			}

			.mid-line {
				font-size: 24rpx;
				margin: 0 16rpx;
				color: rgba(153, 153, 153, 1);
			}

			.line-right {
				width: 278rpx;
				height: 2rpx;
				border-top: 2rpx solid rgba(221, 221, 221, 1.0);
			}
		}

		//倒计时
		.deadline-line {
			display: flex;
			height: 52rpx;
			margin-top: 24rpx;
			margin-left: 228rpx;
			.item-time {
				font-size: 36rpx;
				color: #D43030
			}
			.item-txt {
				font-size: 28rpx;
				color: #666666;
				margin: 0 6rpx 0 6rpx;
				transform: translateY(8rpx);
			}
		}

		// 报名按钮
		.btn-apply {
			margin-left: 32rpx;
			margin-top: 32rpx;
			width: 686rpx;
			height: 94rpx;
			line-height: 94rpx;
			text-align: center;
			border-radius: 8rpx;
			color: rgba(255, 255, 255, 1);
			background: rgba(52, 125, 250, 1);

		}
		// 活动详情
		.activity-detail {
			padding: 36rpx;

			.u-slot-title{
				font-size: 28rpx;
				ont-weight: 400;
				color: rgba(102, 102, 102, 1);
			}
			.u-slot-icon {
				transform: translateX(-24rpx);
			}
			.u-slot-value{
				ont-weight: 600;
				color: rgba(51, 51, 51, 1);
				transform: translateX(16rpx);
			}
			
		}
		.detail-item-icon {
			height: 35rpx;
			margin-left: 30rpx;
			line-height: 35rpx;
		}


		.hint {
			text-align: center;
			font-size: 30rpx;
			color: grey;
		}

		.not-more {
			text-align: center;
			font-size: 30rpx;
		}
	}
	
</style>



